<template>
  <div class="dropdown">
    <el-button :type="type" @click.native="show = !show">
      <slot></slot>
    </el-button>
    <ul class="menu">
      <transition-group name="slide-fade">
       <li v-if="show" class="menu-item" :class="'menu-item-' + index" v-for="(item,index) in items" v-bind:key="item.title"><a :href="item.href">{{item.title}}</a></li>
      </transition-group>
    </ul>
  </div>
</template>

<script>
  export default {
    props:{
      items: {
        type: Array,
        default: function () {
          return []
        }
      },
      type: {
        type: String,
        default: ''
      },
      className: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        show: false
      }
    },
    methods: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .dropdown{
    text-align: center;
    display: inline-block;

    .el-button {
      width: 100%;
      height: 60px;
    }

    /*reset ul*/
    ul {
      margin: 0;
      padding: 0;
      list-style: none;

      li {
        margin: 0;
        padding: 0;
      }
    }

    .menu{
      position: absolute;
      z-index: 1000;
      overflow: hidden;

      .menu-item{
        text-align: center;
        background: #e0e0e0;
        line-height: 60px;
        height: 60px;
        cursor: pointer;
        font-size: 20px;
        padding: 0 10px;

        &:hover{
          background: black;
          color: white;
        }

        a{
          display: inline-block;
          white-space: nowrap;
        }
      }

      $n: 6;

      .slide-fade-enter-active {
        transition: all .28s ease;
        @for $i from 1 through $n {
          &.menu-item-#{$i} {
            transition-delay: .1s * ($n - $i)!important;
          }
        };
      }
      .slide-fade-leave-active {
        transition: all .28s ease;
        @for $i from 1 through $n {
          &.menu-item-#{$i} {
            transition-delay: .1s * $i!important;
          }
        };
      }
      .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateY(-360px);
        opacity: 0;
      }
    }
  }
</style>
